<template>
  <div class="whl-my">
    <div>
      <div>
        <div @click="goPage(1, 'myDetail')">
          <img src="../../assets/images/tongtu-touxiang.jpg" alt="">
        </div>
        <div @click="goPage(1, 'myDetail')">
          <p>
            <span>{{ userInfo.userName }}</span>
            <!--<span>业务员</span>-->
          </p>
          <p>{{ userInfo.mobile }}</p>
        </div>
        <img src="../../assets/images/shezhi-tb.png" alt="" @click="goPage(1, 'setting')">
      </div>
    </div>
    <div class="whl-box">
      <h2>门店管理</h2>
      <div>
        <div v-for="item in storeMenus" :key="item.id" @click="goPageByRole(item)">
          <img :src="item.icon" alt="">
          <p>{{item.title}}</p>
        </div>
      </div>
    </div>
    <div class="whl-box">
      <h2>同福政策</h2>
      <div>
        <div @click="goPage(3)">
          <img src="../../assets/images/my/feilvzhengce-tb.png" alt="">
          <p>费率政策</p>
        </div>
        <div @click="goPage(1, 'loanPolicy', {title: '贷款政策'})">
          <img src="../../assets/images/my/huokuanzhengce-tb.png" alt="">
          <p>贷款政策</p>
        </div>
        <div @click="goPage(1, 'subsidyPolicy', {title: '补贴政策'})">
          <img src="../../assets/images/my/butiezhengce-tb.png" alt="">
          <p>补贴政策</p>
        </div>
        <div @clic="goPage(2, 'message')">
          <img src="../../assets/images/my/xiaoxiguanli-tb.png" alt="">
          <p>消息管理</p>
        </div>
        <div @click="goPage(1, 'concat')">
          <img src="../../assets/images/my/kehujingli-tb.png" alt="">
          <p>客户经理</p>
        </div>
        <!--<div>-->
        <!--  <img src="../../assets/images/shoucang-tb.png" alt="">-->
        <!--  <p>联系客服</p>-->
        <!--</div>-->
        <!--<div>-->
        <!--  <img src="../../assets/images/shoucang-tb.png" alt="">-->
        <!--  <p>ERP政策</p>-->
        <!--</div>-->
      </div>
    </div>
  </div>
</template>
<script>
import jsBridge from "../../tools/jsBridge";
import {Toast} from "mint-ui";
import localStorageClient from '../../js/localstorage'

export default {
  data() {
    return {
      userInfo: {},
      storeMenus: [
        {id: 1, title: '区域信息', icon: require('../../assets/images/my/quyuxinxi-tb.png'), moduleName: 'regionManage', type: 1, path: 'regionManage',query: {}},
        {id: 2, title: '门店列表', icon: require('../../assets/images/my/mendianliebiao-tb.png'), moduleName: 'storeManage', type: 1, path: 'storeManage', query: {}},
        {id: 3, title: '员工管理', icon: require('../../assets/images/my/yuangongguanli-tb.png'), moduleName: 'employeeManage', type: 1, path: 'employeeManage', query: {}},
        {id: 4, title: '个人信息', icon: require('../../assets/images/my/gerenxinxi-tb.png'), moduleName: '', type: 1, path: 'myDetail', query: {}},
        {id: 5, title: '机具信息', icon: require('../../assets/images/my/jijuxinxi-tb.png'), moduleName: '', type: 1, path: 'machinesManage', query: {}},
        {id: 6, title: '语音播报', icon: require('../../assets/images/my/yuyinbobao-tb.png'), moduleName: 'audioPlay', type: 2, path: 'voiceAnnouncements', query: {}},
        {id: 7, title: '收款码', icon: require('../../assets/images/my/shoukuanma-tb.png'), moduleName: '', type: 2, path: 'receivingPayments', query: {}}
      ],
      allMenus: []
    }
  },
  mounted() {
    const menuList = window.CommonUtil.getUrlParam2("menuList");
    this.userInfo = localStorageClient.getJSON('user') ? localStorageClient.getJSON('user') : {};
    this.allMenus = menuList ? menuList.split(',') : [];
  },
  methods: {
    goPage( type, path = '', query = {}) {
      if(type === 1) {
        this.$router.push(
          { path: `/${path}`, query }
        );
      } else if (type === 2) {
        jsBridge.goNativePage({ pageName: path, ...query });
      } else {
        Toast('近期上线，敬请期待...')
      }
    },
    goPageByRole( item = {}) {
      const { type, path, moduleName, query } = item
      if (moduleName === '' || this.allMenus.includes(moduleName)) {
        if(type === 1) {
          this.$router.push(
            { path: `/${path}`, query }
          );
        } else if (type === 2) {
          jsBridge.goNativePage({ pageName: path, ...query });
        } else {
          Toast('近期上线，敬请期待...')
        }
      } else {
        Toast('您暂无权限访问...')
      }

    }
  }
}
</script>

<style lang="scss">
@import "../../style/public";
.whl-my {
  width: 100%;
  height: auto;
  overflow: hidden;
  &>div:first-child {
    width: 100%;
    height: pw(190);
    background: url("../../assets/images/my-bg.png") left top / cover no-repeat;
    background-size: 100%;
    padding-top: pw(85);
    box-sizing: border-box;
    &>div {
      width: 100%;
      height: pw(60);
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 pw(20);
      &>div:first-child {
        width: pw(60);
        height: pw(60);
        border-radius: 50%;
        border: 2px solid #fff;
        box-sizing: border-box;
        &>img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      &>div:nth-child(2) {
        width: auto;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: pw(10);
        &>p:first-child {
          width: 100%;
          height: pw(20);
          color: #fff;
          font-family: PingFang SC,serif;
          display: flex;
          align-items: center;
          &>span:first-child {
            font-size: pw(16);
            font-weight: 600;
          }
          &>span:nth-child(2) {
            display: flex;
            justify-content: center;
            align-items: center;
            width: pw(45);
            height: pw(16);
            border-radius: pw(6);
            background: linear-gradient(180deg, #FFF0B9 0%, #FFE6A5 100%);
            box-shadow: 0 pw(1) pw(2) 0 rgba(255, 255, 255, 0.80) inset;
            color: #964800;
            font-size: pw(11);
            margin-left: pw(5);
          }
        }
        &>p:nth-child(2) {
          color: #FFF;
          font-size: pw(12);
          font-style: normal;
          margin-top: pw(9);
        }
      }
      &>img:nth-child(3) {
        width: pw(24);
        height: pw(24);
      }
    }
  }
  .whl-box {
    width: pw(355);
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    background: #fff;
    border-radius: pw(10);
    padding-bottom: pw(10);
    margin-top: pw(10);
    transform: translateY(pw(-37));
    &>h2:first-child {
      width: 100%;
      height: pw(50);
      display: flex;
      align-items: center;
      padding: 0 pw(10);
      box-sizing: border-box;
      color: #262626;
      font-family: PingFang SC,serif;
      font-size: pw(16);
      font-weight: 500;

    }
    &>div:nth-child(2) {
      width: 100%;
      height: auto;
      overflow: hidden;
      display: grid;
      grid-template-rows: repeat(1, 1fr);
      grid-template-columns: repeat(5, 2fr);
      box-sizing: border-box;
      padding: 0 pw(10);
      grid-gap: pw(5);
      &>div {
        width: 100%;
        height: pw(60);
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        color: #333;
        font-size: pw(14);
        box-sizing: border-box;
        &>img {
          width: pw(40);
          height: pw(40);
        }
      }
    }
  }
  .whl-gap {
    width: 100%;
    height: pw(50);
  }
}
</style>
